uni

您所在的位置：网站首页 › 微信小程序分包 › uni

uni

2023-09-15 04:51| 来源: 网络整理| 查看: 265

目录前言一、根据官方文档说明二、如何配置1.项目目录2.开始配置pages.json总结扩展

前言

发现目前网络上对于uni-app的小程序分包详细介绍的文章来说大部分都是存在问题的，没办法打包，就算是打包也不能使用，主要原因还是因为所使用的第三方包版本升级，uni-app的版本升级。

通过对官方文档的学习，发现现在的分包无需那么复杂可以简单的实现。

提示：以下是本篇文章正文内容，下面案例可供参考

一、根据官方文档说明 subPackages

分包加载配置，此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。

二、如何配置 1.项目目录

目录结构如下（示例）：

┌─pages │ ├─index │ │ └─index.vue │ └─login │ └─login.vue ├─pagesA │ ├─static │ └─list │ └─list.vue ├─pagesB │ ├─static │ └─detail │ └─detail.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json

我们创建的包A和包B，同时每个包目录里面可以创建静态文件的目录static，这点很重要我们这样子创建的话就可以不用再配置copy-webpack-plugin打包静态文件了，因为这个容易出问题。

2.开始配置pages.json

代码如下（示例）：

{ "pages": [{ "path": "pages/index/index", "style": { ...} }, { "path": "pages/login/login", "style": { ...} }], "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, { "root": "pagesB", "pages": [{ "path": "detail/detail", "style": { ...} }] }] }

这样配置就可以了，页面的路径还是要带上包名如：/pagesA/list/list才能进行访问

总结

网上很多使用 copy-webpack-plugin 插件包进行小程序分包的插件不是很好用，修改 copy-webpack-plugin 版本为5.0后是不会报错了但是同样没生效，静态文件还是没有打包进去。

建议不必使用这个插件可以直接采用这种形式进行分包就可以了

同时注意多个包使用到的公共静态文件最好是放一个地方就可以，不必重复打包

扩展 preloadRule

分包预载配置。

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

"preloadRule": { "pagesA/list/list": { "network": "all", "packages": ["__APP__"] }, "pagesB/detail/detail": { "network": "all", "packages": ["pagesA"] } }

【本文地址】

uni

uni

今日新闻

推荐新闻